<template>
  <el-card shadow="never" class="aui-card--fill custom">
    <div class="mod-home">
      <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
        <div class="el-col el-col-6 el-col-xs-12" style="padding-left: 6px; padding-right: 6px;">
          <div class="demo-color-box" style="background: #409EFF;">
            <div class="value">猪场存栏</div>
            <div class="bg-color-sub">
              {{ analysis.ztotal + analysis.stotal }}
            </div>
          </div>
        </div>
        <div class="el-col el-col-6 el-col-xs-12" style="padding-left: 6px; padding-right: 6px;">
          <div class="demo-color-box" style="background: rgb(255, 192, 0);">
            <div class="value">母猪存栏</div>
            <div class="bg-color-sub">
              {{ analysis.mu }}
            </div>
          </div>
        </div>
        <div class="el-col el-col-6 el-col-xs-12" style="padding-left: 6px; padding-right: 6px;">
          <div class="demo-color-box" style="background: #909399">
            <div class="value">公猪存栏</div>
            <div class="bg-color-sub">
              {{ analysis.gong }}
            </div>
          </div>
        </div>
        <div class="el-col el-col-6 el-col-xs-12" style="padding-left: 6px; padding-right: 6px;">
          <div class="demo-color-box" style="background: rgb(55, 180, 0);">
            <div class="value">生长猪存栏</div>
            <div class="bg-color-sub">
              {{ analysis.stotal }}
            </div>
          </div>
        </div>
      </div>
      <el-row style="margin-top: 15px;" :gutter="10">
        <el-col :span="16">
          <el-card class="box-card living-stock" shadow="hover">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">实时存栏</span>
            </div>
            <div class="">
              <el-table
                  :data="tableData" class="stock-table" height="40vh">
                <el-table-column
                    prop="name"
                    label="猪舍">
                </el-table-column>
                <el-table-column
                    prop="mu"
                    label="母猪">
                </el-table-column>
                <el-table-column
                    prop="gong"
                    label="公猪">
                </el-table-column>
                <el-table-column
                    prop="growth"
                    label="生长猪">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">存栏分析</span>
            </div>
            <div style="padding: 10px;">
              <div style="display: flex; flex-direction:column;">
                <div class="el-row">
                  <div class="el-col-1">&nbsp;</div>
                  <div class="el-col-5" style="display: flex; flex-direction:row;  justify-content: space-between;">
                    <span>种猪</span>
                    <span style="margin-right: 30px;">占比</span>
                  </div>
                  <div class="el-col-3">&nbsp;</div>
                  <div class="el-col-5" style="display: flex; flex-direction:row;  justify-content: space-between;">
                    <span>种猪</span>
                    <span style="margin-right: 30px;">占比</span>
                  </div>
                  <div class="el-col-4">&nbsp;</div>
                  <div class="el-col-5" style="display: flex; flex-direction:row;  justify-content: space-between;">
                    <span>生长猪</span>
                    <span style="margin-right: 30px;">占比</span>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col-1">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.fanqing }}</span></li>
                      <li style="color: grey;margin-top: 5px;">返情</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_fanqing" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-3">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.peizhong }}</span></li>
                      <li style="color: grey;margin-top: 5px;">配种</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_peizhong" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-4">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.sburu }}</span></li>
                      <li style="color: grey;margin-top: 5px;">哺乳仔猪</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_sburu" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col-1">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.renshen }}</span></li>
                      <li style="color: grey;margin-top: 5px;">妊娠</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_renshen" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-3">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.konghuai }}</span></li>
                      <li style="color: grey;margin-top: 5px;">空怀</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_konghuai" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-4">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.sbaoyu }}</span></li>
                      <li style="color: grey;margin-top: 5px;">保育</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_sbaoyu" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col-1">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.liuchan }}</span></li>
                      <li style="color: grey;margin-top: 5px;">流产</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_liuchan" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-3">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.duannai }}</span></li>
                      <li style="color: grey;margin-top: 5px;">断奶</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_duannai" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-4">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.syufei }}</span></li>
                      <li style="color: grey;margin-top: 5px;">育肥</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_syufei" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col-1">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.buru }}</span></li>
                      <li style="color: grey;margin-top: 5px;">哺乳</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_buru" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                  <div class="el-col-3">&nbsp;</div>
                  <div class="el-col-5"
                       style="display: flex; flex-direction:row;justify-content: space-between;align-items: center;">
                    <ul style="list-style-type: none;padding: 0px;">
                      <li><span style="font-size: 24px;font-weight: bold;">{{ analysis.houbei }}</span></li>
                      <li style="color: grey;margin-top: 5px;">后备</li>
                    </ul>
                    <div style="padding: 10px;">
                      <el-progress type="circle" :percentage="analysis.p_houbei" :stroke-width=8 :width=70></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">生产日历</span>
            </div>
            <div style="">
              <vc-calendar style="border: 0px;" title-position="left" is-expanded :attributes="attributes" @dayclick="selectDate">
              </vc-calendar>
            </div>
          </el-card>
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">生产提醒</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addNotice">添加</el-button>
            </div>
            <div v-if="notices.length > 0">
              <div v-for="(notice, index) in notices" :key="notice.id" style="display: flex; flex-direction:column;">
                <div style="display: flex; flex-direction:row;justify-content: space-between;padding: 5px 0;">
                  <a>{{ notice.noticeDate }} - {{ notice.content }}</a>
                  <span>发布人：{{ notice.author }}</span>
                </div>
                <el-divider v-if="index < notices.length-1"></el-divider>
              </div>
            </div>
            <div v-if="notices.length == 0">
              <p>当天没有提醒</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <notice-add-or-update v-if="noticeVisible" ref="noticeAddOrUpdate" @refreshDataList="getNotice"></notice-add-or-update>
  </el-card>
</template>

<script>/* eslint-disable */
import LineChart from './components/line-chart'
import VCalendar from 'v-calendar';
import NoticeAddOrUpdate from './notice/index-notice-add-or-update'
import Vue from 'vue';

Vue.use(VCalendar, {
  componentPrefix: 'vc',  // Use <vc-calendar /> instead of <v-calendar />
});
export default {
  data() {
    return {
      noticeVisible: false,
      tableData: [],
      ghettoUpdate: 0,
      analysis:{},
      notices:[],
      attributes: [
        {
          bar: 'green',
          dates: [
            '2020-08-23'
          ],
        }
      ],
    }
  },
  components: {
    LineChart,
    VCalendar,
    NoticeAddOrUpdate
  },
  created() {
    this.formatDates()
    this.getStockAnalysis()
    this.getLivingStockInfo()
    this.getNoticeMonthDates()
    this.getNotice()
  },
  methods: {
    addNotice() {
      this.noticeVisible = true;
      this.$nextTick(() => {
        // this.$refs.noticeAddOrUpdate.dataForm.id = id
        this.$refs.noticeAddOrUpdate.init()
      })
    },
    getNotice() {
      var date = new Date().Format("yyyy-MM-dd")
      this.getNotices(date)
    },
    getLivingStockInfo() {
      this.$http.get('/basic/house/stockdata').then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.tableData = res.data
      }).catch(() => {
      })
    },
    getStockAnalysis() {
      this.$http.get('/dashboard/stockanalysis').then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.analysis = res.data
      }).catch(() => {
      })
    },
    currentChange(item) {
      this.page = item
      this.getLivingStockInfo()
    },
    selectDate(item) {
      // alert(JSON.stringify(item));
      // alert(JSON.stringify(item.id));
      this.getNotices(item.id);
    },
    getNoticeMonthDates() {
      var date = new Date().Format("yyyy-MM-dd")
      this.$http.get('/notice/notice/monthDates?noticeDate=' + date).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.attributes = [
          {
            bar: 'green',
            dates: res.data,
          }
        ];
      }).catch(() => {
      })
    },
    getNotices(date) {
      this.$http.get('/notice/notice/list?noticeDate=' + date).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.notices = res.data
      }).catch(() => {
      })
    },
    formatDates() {

      Date.prototype.Format = function (fmt) {
        var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "H+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      }

    }
  }
}
</script>
<style scoped>
.demo-color-box {
  position: relative;
  border-radius: 2px;
  padding: 20px;
  height: 100px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.bg-color-sub {
  font-size: 30px;
  margin-top: 10px;
}

.custom /deep/ .el-card {
  border-radius: 2px;
}

.custom /deep/ .el-card__body {
  padding: 10px;
}
.custom .living-stock /deep/ .el-card__body {
  padding: 0px;
}
.custom /deep/ .el-card__header {
  padding: 10px 20px;
}

.custom /deep/ .el-card__header {
  height: 46px;
}

.custom .stock-table /deep/ td th {

}

.stock-table /deep/ .mod-home table th, .stock-table /deep/ .mod-home table td {
  border: 0px;
  padding: 9px 10px;
}

.custom /deep/ .el-progress__text {
  font-size: 20px !important;
  color: #808080;
  font-weight: bold;
}
.custom /deep/ .el-divider--horizontal{
  margin: 12px 0;
}
.custom /deep/ .el-divider{
  background-color: #e9e9e9;
}
</style>
